<template>
  <div class="home-wrap">
    <van-sticky>
      <div class="home-search-content">
        <div class="page-title">设备中心</div>
        <div class="home-search-box">
          <van-search
            v-model="searchKey"
            placeholder="设备名称"
            @search="onSearch"
          />
        </div>
      </div>
    </van-sticky>
    <div class="list-wrap">
      <ListOfSingle
        :apiUrl="apiUrl"
        :apiParams="params"
        bgColor="transparent"
        ref="ListOfSingle"
        :dropdownRefresh="true"
        @itemClick="handleItemClick"
      >
        <template v-slot="{ data }">
          <div class="list-device-box">
            <div class="device-icon">
              <img src="@/assets/img/icon-sb.jpg" />
            </div>
            <div class="device-info">
              <div class="tt">{{ data.name }}</div>
              <div class="no">{{ data.device_code }}</div>
            </div>
          </div>
        </template>
      </ListOfSingle>
    </div>
  </div>
</template>

<script>
import { ListOfSingle } from "@/components";
export default {
  components: {
    ListOfSingle
  },
  data() {
    return {
      searchKey: "",
      apiUrl: "/xvUHiJZSmB.php/equipment/device/manage/index",
      params: {
        addtabs: 1,
        sort: "id",
        order: "desc",
        filter: '{"name":""}',
        op: '{"name":"LIKE"}'
      }
    };
  },
  mounted() {},
  methods: {
    onSearch() {
      this.params.filter = `{"name":"${this.searchKey}"}`;
    },
    handleItemClick(item) {
      const d = { ...item };
      this.$router.push({
        path: "/device/detail",
        query: {
          ...d
        }
      });
    }
  }
};
</script>

<style scoped lang="scss">
.home-wrap {
  background: #f5f6f8;
}
.home-search-content {
  background: #fff;
  .page-title {
    font-size: 36px;
    font-weight: bold;
    padding: 20px 30px 0;
  }
}

.list-wrap {
  min-height: 100vh;
  background: #f5f6f8;
  padding: 20px 0;
}
.list-device-box {
  display: flex;
  align-items: center;
  padding: 15px 0 15px 40px;
  background: #fff;
  border-bottom: 1px solid #f2f2f2;
  .device-icon {
    width: 100px;
    height: 100px;
    border-radius: 6px;
    background: #f6f9fe;
    margin-right: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 54px;
      height: 63px;
    }
  }
  .device-info {
    flex: 1;
    .tt {
      font-size: 32px;
      color: #333;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .no {
      font-size: 24px;
      color: #9d9eb1;
    }
  }
}
</style>
